<template>
  <view class="container">
    <view class="header">
      <!-- 姓名 -->
      <view class="item" @click="$refs.name.open()">
        <view class="title">姓名</view>
        <view class="itemright">
          <text>{{ userinfo.nickname }}</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <!-- 头像 -->
      <view
        @click="chooseavatar"
        style="display: flex; align-items: center; justify-content: space-between; background-color: #fff; padding: 32rpx 16rpx 26rpx 26rpx; border-bottom: 1px solid #e7e7e7"
      >
        <view>头像</view>
        <view style="display: flex; align-items: center">
          <image :src="imgurl + userinfo.avatar" mode="" style="width: 80rpx; height: 80rpx; border-radius: 60rpx"></image>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <!-- 性别 -->
      <view class="item" @click="$refs.gender.open()">
        <view class="title">性别</view>
        <view class="itemright">
          <text>{{ userinfo.gender == 1 ? '男' : '女' }}</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <!-- 年龄 -->
      <view class="item" @click="$refs.age.open()">
        <view class="title">年龄</view>
        <view class="itemright">
          <text>{{ userinfo.age }}</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <!-- 所在城市 -->
      <view class="item" @click="$refs.city.open()">
        <view class="title">所在城市</view>
        <view class="itemright">
          <text>{{ userinfo.citys }}</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <!-- 车型 -->
      <view class="item" @click="$refs.car.open()">
        <view class="title">车型</view>
        <view class="itemright">
          <text>{{ userinfo.vehicle }}</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <!-- 车牌号 -->
      <view class="item" @click="$refs.carnumber.open()">
        <view class="title">车牌号</view>
        <view class="itemright">
          <text>{{ userinfo.car_plate }}</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <!-- 紧急联系人 -->
      <view class="item" @click="$refs.jjpeople.open()">
        <view class="title">紧急联系人</view>
        <view class="itemright">
          <text>{{ userinfo.urgent_name }}</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <!-- 紧急联系人电话 -->
      <view class="item" @click="$refs.jjpeoplephone.open()">
        <view class="title">紧急联系人电话</view>
        <view class="itemright">
          <text>{{ userinfo.urgent_mobile }}</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 昵称弹框 -->
    <uni-popup ref="name" type="center">
      <view class="name">
        <view class="title">昵称</view>
        <input type="text" class="ipt" placeholder="请输入昵称" v-model="name" />
        <view style="display: flex; align-items: center; margin-top: 54rpx">
          <view class="btn" @click="$refs.name.close()">取消</view>
          <view class="btn2" @click="submitname">确认</view>
        </view>
      </view>
    </uni-popup>
    <!-- 性别弹框 -->
    <uni-popup ref="gender" type="bottom">
      <view class="gender">
        <view class="item" style="border-bottom: 1px solid #e7e7e7" @click="choosegender('男')">男</view>
        <view class="item2" @click="choosegender('女')">女</view>
        <view class="cancel" @click="$refs.gender.close()">取消</view>
      </view>
    </uni-popup>
    <!-- 年龄 -->
    <uni-popup ref="age" type="bottom">
      <view class="age">
        <view class="header">
          <view style="font-weight: 500; font-size: 30rpx; color: #222222" @click="$refs.age.close()">取消</view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">请选择</view>
          <view style="font-weight: 500; font-size: 30rpx; color: #3483f6" @click="submitage">确定</view>
        </view>
        <picker-view indicator-style="height: 50px;" :value="age" @change="ageChange" class="picker">
          <picker-view-column>
            <view class="item" v-for="(item, index) in agelist" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
    <!-- 城市 -->
    <uni-popup ref="city" type="bottom">
      <view class="age">
        <view class="header">
          <view style="font-weight: 500; font-size: 30rpx; color: #222222" @click="$refs.city.close()">取消</view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">请选择</view>
          <view style="font-weight: 500; font-size: 30rpx; color: #3483f6" @click="submitcity">确定</view>
        </view>
        <picker-view indicator-style="height: 50px;" :value="age" @change="cityChange" class="picker">
          <picker-view-column>
            <view class="item" v-for="(item, index) in citylist" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
    <!-- 车型 -->
    <uni-popup ref="car" type="bottom">
      <view class="age">
        <view class="header">
          <view style="font-weight: 500; font-size: 30rpx; color: #222222" @click="$refs.car.close()">取消</view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">请选择</view>
          <view style="font-weight: 500; font-size: 30rpx; color: #3483f6" @click="submitcar">确定</view>
        </view>
        <picker-view indicator-style="height: 50px;" :value="age" @change="carChange" class="picker">
          <picker-view-column>
            <view class="item" v-for="(item, index) in carlist" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
    <!-- 车牌号 -->
    <uni-popup ref="carnumber" type="center">
      <view class="name">
        <view class="title">车牌号</view>
        <input type="text" class="ipt" placeholder="例:豫A88888" v-model="carid" />
        <view style="display: flex; align-items: center; margin-top: 54rpx">
          <view class="btn" @click="$refs.carnumber.close()">取消</view>
          <view class="btn2" @click="submitcarid">确认</view>
        </view>
      </view>
    </uni-popup>
    <!-- 紧急联系人 -->
    <uni-popup ref="jjpeople" type="center">
      <view class="name">
        <view class="title">紧急联系人</view>
        <input type="text" class="ipt" v-model="jjpeople" />
        <view style="display: flex; align-items: center; margin-top: 54rpx">
          <view class="btn" @click="$refs.jjpeople.close()">取消</view>
          <view class="btn2" @click="savepeople">确认</view>
        </view>
      </view>
    </uni-popup>
    <!-- 紧急联系人电话 -->
    <uni-popup ref="jjpeoplephone" type="center">
      <view class="name">
        <view class="title">紧急联系人</view>
        <input type="text" class="ipt" v-model="jjpeoplephone" />
        <view style="display: flex; align-items: center; margin-top: 54rpx">
          <view class="btn" @click="$refs.jjpeoplephone.close()">取消</view>
          <view class="btn2" @click="submitjjpeoplephone">确认</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      imgurl: '',
      userinfo: {},
      age: [0],
      agelist: ['50后', '60后', '70后', '80后', '90后', '00后'],
      citylist: [],
      carlist: [],
      jjpeople: '', //紧急联系人
      carid: '',
      jjpeoplephone: ''
    };
  },
  onLoad() {
    this.imgurl = this.img;
    this.getcitylist();
    this.getcartyep();
  },
  onShow() {
    this.getuserinfo();
  },
  methods: {
    // 获取车型
    async getcartyep() {
      const res = await this.http('/index/car');
      console.log('车型', res);
      this.carlist = res.data;
    },
    // 获取城市列表
    async getcitylist() {
      const res = await this.http('/index/citys', {
        pid: '0'
      });
      console.log('获取省市', res.data);
      res.data.forEach((item) => {
        if (item.list.length != 0) {
          this.citylist.push(...item.list);
        }
      });
      console.log('城市列表', this.citylist);
    },
    // 获取个人信息
    async getuserinfo() {
      const res = await this.http('/user/myuser', 'POST');
      console.log('个人信息', res);
      this.userinfo = res.data;
    },

    // 选择头像
    chooseavatar() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        success: (res) => {
          uni.uploadFile({
            url: this.uploadurl + '/Common/upload', //仅为示例，非真实的接口地址
            filePath: res.tempFiles[0].tempFilePath,
            name: 'file',
            header: {
              token: uni.getStorageSync('token')
            },
            success: (data) => {
              console.log(JSON.parse(data.data));
              this.userinfo.avatar = JSON.parse(data.data).data.url;
              this.http('/user/profile', { ...this.userinfo }, 'POST');
            }
          });
        }
      });
    },
    // 选择性别
    choosegender(type) {
      console.log('性别---', type);
      this.userinfo.gender = type == '男' ? 1 : 2;
      console.log(this.userinfo.gender);
      this.http('/user/profile', { ...this.userinfo });
      this.$refs.gender.close();
    },
    // 年龄选择
    ageChange(e) {
      // console.log('选择的年龄', e.detail.value[0]);
      console.log('选择的年龄', this.agelist[e.detail.value[0]]);
      this.userinfo.age = this.agelist[e.detail.value[0]];
      this.http('/user/profile', { ...this.userinfo });
    },
    // 年龄提交
    submitage() {
      this.$refs.age.close();
      this.http('/user/profile', { ...this.userinfo });
    },
    // 城市改变
    cityChange(e) {
      console.log('选择的城市', e.detail.value[0]);
      console.log(this.citylist[e.detail.value[0]].name);
      this.userinfo.citys = this.citylist[e.detail.value[0]].name;
    },
    // 城市提交
    submitcity() {
      if (this.userinfo.citys == '') {
        this.userinfo.citys = this.citylist[0].name;
      }
      this.$refs.city.close();
      this.http('/user/profile', { ...this.userinfo });
    },
    // 车型改变
    carChange(e) {
      console.log('选择的车型', e.detail.value[0]);
      this.userinfo.vehicle = this.carlist[e.detail.value[0]].name;
    },
    // 车型提交
    submitcar() {
      if (this.userinfo.vehicle == '') {
        this.userinfo.vehicle = this.carlist[0].name;
      }
      this.$refs.car.close();
      this.http('/user/profile', { ...this.userinfo });
    },
    //保存紧急联系人
    savepeople() {
      if (this.jjpeople == '') {
        return uni.showToast({
          title: '输入的内容不能为空',
          icon: 'none'
        });
      }
      this.$refs.jjpeople.close();
      this.userinfo.urgent_name = this.jjpeople;
      this.http('/user/profile', { ...this.userinfo });
    },
    // 保存车牌好
    submitcarid() {
      if (this.carid == '') {
        return uni.showToast({
          title: '输入的内容不能为空',
          icon: 'none'
        });
      }
      this.userinfo.car_plate = this.carid;
      this.$refs.carnumber.close();
      this.http('/user/profile', { ...this.userinfo });
    },
    // 保存紧急联系人
    submitjjpeoplephone() {
      if (this.jjpeoplephone == '') {
        return uni.showToast({
          title: '输入的内容不能为空',
          icon: 'none'
        });
      }
      if (!/^1[3-9][0-9]{9}$/.test(this.jjpeoplephone)) {
        return uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
      }
      this.$refs.jjpeoplephone.close();
      this.userinfo.urgent_mobile = this.jjpeoplephone;
      this.http('/user/profile', { ...this.userinfo });
    },
    //保存昵称
    submitname() {
      if (this.name == '') {
        return uni.showToast({
          title: '输入的内容不能为空',
          icon: 'none'
        });
      }
      this.$refs.name.close();
      this.userinfo.nickname = this.name;
      this.http('/user/profile', { ...this.userinfo });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .header {
    box-sizing: border-box;
    width: 100%;
    margin-top: 20rpx;
    .item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100rpx;
      background-color: #fff;
      padding: 32rpx 16rpx 26rpx 26rpx;
      border-bottom: 1px solid #e7e7e7;
      .title {
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
      }
      .itemright {
        display: flex;
        align-items: center;
      }
    }
  }
  .name {
    box-sizing: border-box;
    width: 530rpx;
    height: 352rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding-top: 36rpx;
    overflow: hidden;
    .title {
      font-weight: bold;
      font-size: 30rpx;
      color: #222222;
      text-align: center;

      margin-bottom: 30rpx;
    }
    .ipt {
      box-sizing: border-box;
      width: 432rpx;
      height: 90rpx;
      background: #f2f2f2;
      padding: 25rpx 32rpx;
      margin: 0 49rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
    .btn {
      width: 263rpx;
      height: 98rpx;
      text-align: center;
      line-height: 98rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
      border: 1px solid #e7e7e7;
    }
    .btn2 {
      width: 263rpx;
      height: 98rpx;
      text-align: center;
      line-height: 98rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #3483f6;
      border: 1px solid #e7e7e7;
    }
  }
  .gender {
    box-sizing: border-box;
    width: 750rpx;
    height: 400rpx;
    background: #f8f8f8;
    border-radius: 40rpx 40rpx 0rpx 0rpx !important;
    .item {
      height: 132rpx;
      text-align: center;
      line-height: 132rpx;
      font-weight: 500;
      font-size: 30rpx;
      background: #ffffff;
      color: #222222;
    }
    .item2 {
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      font-weight: 500;
      font-size: 30rpx;
      background: #ffffff;
      color: #222222;
    }
    .cancel {
      text-align: center;
      margin-top: 20rpx;
      background: #ffffff;
      height: 200rpx;
      line-height: 150rpx;
    }
  }
  .age {
    box-sizing: border-box;
    width: 750rpx;
    height: 776rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding-top: 48rpx;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .picker {
      width: 100%;
      height: 500rpx;
      .item {
        width: 100%;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
      }
    }
  }
}
</style>

<style>
page {
  background-color: #f8f9fa;
}
</style>
